<template>
  <div class="app-container">
    <el-tabs type="border-card" :value="activeTab" @tab-click="changeTab">
      <el-tab-pane v-if="roleCheck('records')" name="one">
        <span slot="label"><i class="el-icon-date"></i> 转账记录</span>
        <transfer-logs v-show="activeTab === 'one'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('exception-records')" label="异常转账处理" name="two">
        <transfer-exceptions v-show="activeTab === 'two'"/>
      </el-tab-pane>
      <!-- <el-tab-pane label="转账设置" name="three">
        <transfer-configs v-show="activeTab === 'three'"/>
      </el-tab-pane> -->
    </el-tabs>

  </div>
</template>

<script>
  import TransferLogs from "@/views/finance/transfer/logs";
  import TransferExceptions from "@/views/finance/transfer/exceptions";
  import TransferConfigs from "@/views/finance/transfer/configs";
  import {tabs} from '@/build'

  export default {
    name: "finance-transfer",
    components: {
      TransferConfigs,
      TransferExceptions,
      TransferLogs
    },
    mixins: [tabs],
    data() {
      return {
        activeTab: 'one',
      }
    },
    mounted(){
      this.activeTab = this.roleCheck('edit-member-info') ? 'one' : 'two';
    },
    mounted() {
      this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, '转账记录', true)});
    },
    methods: {
      changeTab(tabs) {
        this.activeTab = tabs.name
        this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, tabs.label, true)});
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
